﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--路径下面不能加/-->
<head lang="en" th:replace="teacher/public :: #public_head">
</head>
<body>
<!--头部-->
<header class="publicHeader" th:replace="teacher/public :: #public_header">
</header>
<!--时间-->
<section class="publicTime" th:replace="teacher/public :: #public_time">
</section>

<!--主体内容-->
<section class="publicMian ">
    <div class="left" th:replace="teacher/public :: #public_left(activeUri='pwd')">
    </div>
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>密码修改页面</span>
            </div>
            <div class="providerAdd">
                <form id="pwdForm" th:action="@{/user/pwd}" action="#"  method="post">
                    <!--div的class 为error是验证错误，ok是验证成功-->
                    <div class="">
                        <label for="oldPassword">旧密码：</label>
                        <input type="password"  id="oldPassword" autofocus="autofocus" required/>
                        <span id="pwdText">*请输入原密码</span>
                    </div>
                    <div>
                        <label for="newPassword">新密码：</label>
                        <input type="password"  id="newPassword" required/>
                        <span id="newPwdText">*请输入新密码</span>
                    </div>
                    <div>
                        <label for="reNewPassword">确认新密码：</label>
                        <input type="password"  name="password" id="reNewPassword" required/>
                        <span id="reNewPwdText" >*请输入新确认密码，保证和新密码一致</span>
                    </div>
                    <div class="providerAddBtn">
                        <!--<a href="#">保存</a>-->
                        <input type="button" value="保存" id="save"/>
                    </div>
                </form>
            </div>
        </div>
    </section>
<footer class="footer" th:replace="teacher/public :: #public_footer">
</footer>
<script type="text/javascript" th:inline="javascript">
    var isCheck = false;
    // 原密码失去焦点
    $("#oldPassword").blur(function () {
        var oldPassword = $(this).val().trim();
        if(!oldPassword){
         //   $("#pwdText").css({'color':'red'});
            $("#pwdText").replaceWith("<span style='color: red' id='pwdText'>*请输入原密码</span>")
            isCheck = false;
            return;
        }

        //使用thymeleaf进行行内表达式
        var url = [[@{/user/pwd/}]] + oldPassword;
        //ajax 进行异步请求
        $.ajax({
            url:url,
            dataType:'json',
            method:'GET',
            success:function (data) {
                isCheck = data;
                data ? $("#pwdText").replaceWith("<span id='pwdText'>*原密码正确</span>")
                    : $("#pwdText").replaceWith("<span style='color: red' id='pwdText'>*原密码不正确</span>")
            },
            error:function(){
                $("#pwdText").html("校验原密码异常");
                isCheck = false;
            }
        });

    });


    $("#save").click(function () {
        if (isCheck){
            if ($("#newPassword").val() && $("#reNewPassword").val() && $("#newPassword").val() == $("#reNewPassword").val()) {
                $("#pwdForm").submit();
            }else {
                $("#reNewPwdText").replaceWith("<span style='color: red'  id='reNewPwdText'>*保证和新密码一致</span>");
               // $("#reNewPassword").val("");
            }
        }
    });
</script>
</body>
</html>